<template>
	<view>
		<view>
			<!--     全部  待支付    待使用  待评价    -->
			<view class="box-shang">
				<view @click="toQuanBu">全部</view>
				<view @click="toZhiFu" >待支付</view>
				<view @click="toShiYong" >待使用</view>
				<view @click="toPingJia" style="border-bottom: 5rpx solid black;">待评价</view>
			</view>
			<!--         订单 内容           -->
			<view class="dingdan-wai">
				<!-- 订单编号 -->
				<view class="bianhao" @click="toXiangQingPingJia">
					<view>订单编号:24255252522</view>
					<view>
						<image src="/static/收起箭头小 拷贝@3x.png" mode=""></image>
					</view>
				</view>
				<!-- 服务内容 -->
				<view style="
				display: flex;
				justify-content: space-between;
				border-bottom: 4rpx solid whitesmoke;
				margin: 30rpx;
				">
					<view class="fuwu-3">
						<view>服务项目: 车辆保养</view>
						<view>服务门店: 大宝车辆维修店</view>
						<view style="margin-bottom: 30rpx;">下单时间: 2023-03-12 12:09</view>
					</view>
					<view style="margin: 60rpx;color: #55aaff;">待评价</view>
				</view>
				<!-- 订单金额 -->                                                                                                                                                                                           
				<view>
					<view style="float: left;margin-left: 40rpx;margin-top: 5rpx; color: orangered;">实付: 230.56元</view>
					<view class="zailai">再来一单</view>
					<view class="pingjia" @click="toLiJiPingJia">立即评价</view>
				</view>
			</view>
			<view class="dingdan-wai">
				<!-- 订单编号 -->
				<view class="bianhao" @click="toXiangQingPingJia">
					<view>订单编号:24255252522</view>
					<view>
						<image src="/static/收起箭头小 拷贝@3x.png" mode=""></image>
					</view>
				</view>
				<!-- 服务内容 -->
				<view style="
				display: flex;
				justify-content: space-between;
				border-bottom: 4rpx solid whitesmoke;
				margin: 30rpx;
				">
					<view class="fuwu-3">
						<view>服务项目: 车辆保养</view>
						<view>服务门店: 大宝车辆维修店</view>
						<view style="margin-bottom: 30rpx;">下单时间: 2023-03-12 12:09</view>
					</view>
					<view style="margin: 60rpx;color: #55aaff;">待评价</view>
				</view>
				<!-- 订单金额 -->                                                                                                                                                                                           
				<view>
					<view style="float: left;margin-left: 40rpx;margin-top: 5rpx; color: orangered;">实付: 230.56元</view>
					<view class="zailai">再来一单</view>
					<view class="pingjia">立即评价</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			toShiYong(){
				uni.redirectTo({
					url:"/pages/my/index/dingDan/dai-shiyong/dai-shiyong"
				})
			},
			toPingJia(){
				uni.redirectTo({
					url:"/pages/my/index/dingDan/dai-pingjia/dai-pingjia"
				})
			},
			toQuanBu(){
				uni.redirectTo({
					url:"/pages/my/index/dingDan/dingDan"
				})
			},
			toZhiFu(){
				uni.redirectTo({
					url:"/pages/my/index/dingDan/dai-zhifu/dai-zhifu"
				})
			},
			toXiangQingPingJia(){
				uni.navigateTo({
					url:"/pages/my/index/dingDan/dai-pingjia/yangqing-pingjia/yangqing-pingjia"
				})
			},
			toLiJiPingJia(){
				uni.navigateTo({
					url:"/pages/my/index/dingDan/dai-pingjia/liJiPingJia/liJiPingJia"
				})
			}
		}
	}
</script>

<style>
	.box-shang{
		display: flex;
		justify-content: space-between;
	}
	.box-shang view{
		margin: 20rpx 40rpx 20rpx 40rpx;
		color: black;
	}
	.dingdan-wai{
		width: 93%;
		height: 450rpx;
		background-color: #fff;
		border-radius: 30rpx;
		margin: 0 auto;
	}
	.dingdan-wai image{
		width: 20rpx;
		height: 30rpx;
		margin: 0 20rpx 50rpx 10rpx
	}
	.bianhao{
		display: flex;
		justify-content: space-between;
	    border-bottom: 10rpx solid whitesmoke;
	/* 	background-color: #55ffff; */
		height: 80rpx;
		margin: 30rpx;
	}
	.bianhao view{
		margin-top: 20rpx;
	}
	.fuwu-3 view{
		margin-bottom: 20rpx;
	}
	.pingjia{
		width: 180rpx;
		height: 60rpx;
		background-color: #c0c0c0;
		color: #fff;
		text-align: center;
		line-height: 60rpx;
		float: right;
		border-radius: 15rpx;
		margin-right: 20rpx;
	}
	.zailai{
		width: 180rpx;
		height: 60rpx;
		background-color: #55aaff;
		color: #fff;
		text-align: center;
		line-height: 60rpx;
		float: right;
		border-radius: 15rpx;
		margin-right: 20rpx;
	}

</style>
